<template>
    <div style="margin-left: 5%; width: 90%">
        <br/>
        <v-card style="padding: 20px">
            <v-row>
                <v-col cols="12" sm="4">
                    <img :src="user.img" width="100%" style="border-radius: 10px">
                    <center v-if="user.type==0">
                        <v-chip label color="orange" outlined class="ma-2">
                        <span style="font-size: medium">
                            Admin
                        </span>
                        </v-chip>
                    </center>
                    <center v-if="user.type==-1">
                        <v-chip label color="orange" outlined class="ma-2">
                        <span style="font-size: medium">
                            SuperAdmin
                        </span>
                        </v-chip>
                    </center>
                    <span v-if="nUser!='' && nUser.id!=user.id">
                        <v-btn block color="info" depressed tile v-if="!follow" @click="followUser">关 注</v-btn>
                    <v-btn block depressed tile v-if="follow" @click="unfollow">取消关注</v-btn>
                    </span>
                </v-col>
                <v-col cols="12" sm="8">
                    <strong style="font-size: large">个人主页</strong>
                    <v-divider></v-divider>
                    <br/>
                    <center>
                        <strong style="font-size: x-large;color: orange;">{{user.name}}</strong>
                    </center>
                    <div style="margin-left: 5%;margin-top: 20px">
                        <v-row>
                            <v-col cols="3">邮箱：</v-col>
                            <v-col cols="9" style="color: dodgerblue; font-weight: bold">{{user.email}}</v-col>
                        </v-row>
                        <v-row>
                            <v-col cols="3">班级：</v-col>
                            <v-col cols="9" style="color: dodgerblue; font-weight: bold">{{user.clazz}}</v-col>
                        </v-row>
                        <v-row>
                            <v-col cols="3">届数：</v-col>
                            <v-col cols="9" style="color: dodgerblue; font-weight: bold">{{user.sess}}</v-col>
                        </v-row>
                    </div>
                    <br/>
                    <div>
                        <v-row>
                            <v-col cols="6">
                                <center>
                                    <strong style="font-size: large">关 注</strong>
                                    <v-divider></v-divider>
                                    <br/>
                                    <div style="background-color: rgb(248,249,250); width: 120px">
                                        <center>
                                            <br/>
                                            <strong style="color: dodgerblue; font-size: xx-large">
                                                {{user.follow.length}}
                                            </strong>
                                            <br/>
                                            <br/>
                                        </center>
                                    </div>
                                </center>
                            </v-col>
                            <v-col cols="6">
                                <center>
                                    <strong style="font-size: large">粉 丝</strong>
                                    <v-divider></v-divider>
                                    <br/>
                                    <div style="background-color: rgb(248,249,250); width: 120px">
                                        <center>
                                            <br/>
                                            <strong style="color: dodgerblue; font-size: xx-large">
                                                {{user.fans.length}}
                                            </strong>
                                            <br/>
                                            <br/>
                                        </center>
                                    </div>
                                </center>
                            </v-col>
                        </v-row>
                    </div>
                </v-col>
            </v-row>
        </v-card>
        <br/>
        <v-row>
            <v-col cols="12" sm="6">
                <v-card style="padding: 20px">
                    <v-row>
                        <v-col cols="4">
                            <center>
                                <strong style="font-size: large">总阅读量</strong>
                                <v-divider></v-divider>
                                <br/>
                                <div style="background-color: rgb(248,249,250);">
                                    <center>
                                        <br/>
                                        <strong style="color: dodgerblue; font-size: xx-large">
                                            {{info.views}}
                                        </strong>
                                        <br/>
                                        <br/>
                                    </center>
                                </div>
                            </center>
                        </v-col>
                        <v-col cols="4">
                            <center>
                                <strong style="font-size: large">总点赞量</strong>
                                <v-divider></v-divider>
                                <br/>
                                <div style="background-color: rgb(248,249,250);">
                                    <center>
                                        <br/>
                                        <strong style="color: dodgerblue; font-size: xx-large">
                                            {{info.likes}}
                                        </strong>
                                        <br/>
                                        <br/>
                                    </center>
                                </div>
                            </center>
                        </v-col>
                        <v-col cols="4">
                            <center>
                                <strong style="font-size: large">总点亮量</strong>
                                <v-divider></v-divider>
                                <br/>
                                <div style="background-color: rgb(248,249,250);">
                                    <center>
                                        <br/>
                                        <strong style="color: dodgerblue; font-size: xx-large">
                                            {{info.lights}}
                                        </strong>
                                        <br/>
                                        <br/>
                                    </center>
                                </div>
                            </center>
                        </v-col>
                    </v-row>
                </v-card>
            </v-col>
            <v-col cols="12" sm="6">
                <v-card style="padding: 20px">
                    <strong style="font-size: large">文章</strong>
                    <v-divider></v-divider>
                    <div v-for="i in atcList">
                        <div style="margin: 10px">
                            <a :href="'/article/'+i.id" target="_blank" style="text-decoration: none">{{i.title}}</a>
                        </div>
                        <v-divider></v-divider>
                    </div>
                </v-card>
            </v-col>
        </v-row>
        <br/>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return{
                info: '',
                user: '',
                atcList: [],
                nUser: '',
                follow: false,
            }
        },
        created() {
            this.getData();
        },
        watch:{
            '$route.params.pathMatch': function () {
                this.getData();
            }
        },
        methods:{
            followUser(){
                const t = this;
                axios.get('/user/follow/'+t.user.id).then(function (resp) {
                    if (resp.data){
                        t.getData();
                        t.follow = true;
                    }
                })
            },
            unfollow(){
                const t = this;
                axios.get('/user/unfollow/'+t.user.id).then(function (resp) {
                    if (resp.data){
                        t.getData();
                        t.follow = false;
                    }
                })
            },
            getData(){
                let uid = this.$route.params.pathMatch;
                const t = this;
                this.getUserBy(uid).then(function (resp) {
                    t.user = resp.data;

                    axios.get('/atc/getByUid/'+t.user.id).then(function (resp2) {
                        t.atcList = resp2.data;
                    })
                    t.getUser().then(function (resp3) {
                        t.nUser = resp3.data;
                        let arr = t.nUser.follow;
                        for (let i=0; i<arr.length; i++) {
                            if (arr[i]==t.user.id){
                                t.follow = true;
                                break;
                            }
                        }
                    })
                    t.getInfoByUid(t.user.id).then(function (resp4) {
                        t.info = resp4.data;
                    })
                })

            }
        }
    }
</script>

<style scoped>

</style>